<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="tabs">
			<view :id="id">
				<view class="dis-flex flex-x-between">
					<view class="title tab-item" :id="'tab-item-' + index" v-for="(item,index) in tabsList" :key="index"
						@click="change(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="tab-bar" :style="[tabBarStyle]"></view>
			</view>
		</view>
		<!-- 账号密码登录表单 -->
		<view class="login-form" v-if="currentIndex === 0">
			<view class="form-item">
				<u-input class="form-item--input" type="text" v-model="form1.enterpriseName" placeholder="请输入企业账号" />
			</view>
			<view class="form-item">
				<u-input class="form-item--input" type="text" v-model="form1.userName" placeholder="请输入账号" />
			</view>
			<view class="form-item">
				<u-input class="form-item--input" password-icon type="password" v-model="form1.password"
					placeholder="请输入密码" />
			</view>
			<view class="form-item">
				<u-input class="form-item--input" v-model="form1.code" placeholder="请输入验证码" />
				<view class="code m-l-20" @click="getCodeImg">
					<image class="code-img" :src="codeUrl" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 短信验证码登录表单 -->
		<view class="login-form" v-else>
			<view class="form-item">
				<u-input class="form-item--input" type="text" v-model="form2.phone" placeholder="请输入手机号" />
			</view>
			<view class="form-item">
				<u-input class="form-item--input" v-model="form2.code" placeholder="获取验证码" />
				<u-button plain class="m-top10" size="mini" @click="handleCaptcha">
					<span v-if="!smsState">获取验证码</span>
					<span v-else>重新发送({{ times }})秒</span>
				</u-button>

			</view>
		</view>
		<!-- 其他登录方式 -->
		<!-- <view class="other-logins">
				<navigator open-type="redirect" url="/pages/login/recoverPwd" hover-class="navigator-hover">
					验证码登录
					未注册账号？立即注册
				</navigator>
				<navigator open-type="redirect" url="/pages/login/recoverPwd?title=忘记密码" hover-class="navigator-hover">
					忘记密码
				</navigator>
			</view> -->
		<!-- 登录按钮 -->
		<view class="login-button" @click="handleLogin">
			<text v-if="!isLoading">立即登录</text>
			<text v-else>登录中...</text>
		</view>
	</view>

	</view>
</template>

<script>
	import store from '@/store'
	import * as Verify from '@/utils/verify'
	import * as LoginApi from '@/api/login'
	import resize from './mixins/resize.js'

	export default {
		name: 'login',
		mixins: [resize],
		data() {
			return {
				// 密码登录表单
				form1: {
					userName: '',
					password: '',
					enterpriseName: '',
					uuid: '',
					code: '',
				},
				// 短信登录表单
				form2: {
					phone: '',
					code: '',
				},
				codeId: '', // 授权码
				isLoading: false,
				codeUrl: '', // 图形验证码
				captchaOnOff: undefined,
				loginStatus: false,
				scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
				barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
				tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
				id: this.$u.guid(), // id值
				parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
				currentIndex: 0, // 当前选中的索引
				barWidth: 100, // 菜单底部移动的bar的宽度，单位rpx
				duration: 0.5, // 过渡动画时长, 单位ms
				activeColor: '#42B3BC', // 选中项的主题颜色
				inactiveColor: '#303133', // 未选中项的颜色
				barHeight: 6, // 移动bar的高度
				tabsList: [{
						name: '账号密码登录'
					},
					{
						name: '短信登录'
					},
				]
			}
		},
		watch: {
			currentIndex: {
				immediate: true,
				handler(nVal, oVal) {
					// 视图更新后再执行移动操作
					this.$nextTick(() => {
						this.$nextTick(() => {
							this.scrollByIndex();
						});
					});
				}
			},
		},

		computed: {
			// 移动bar的样式
			tabBarStyle() {
				let style = {
					width: this.barWidth + 'rpx',
					transform: `translate(${this.scrollBarLeft}px, -100%)`,
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
					'background-color': this.activeColor,
					height: this.barHeight + 'rpx',
					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
					'border-radius': `${this.barHeight / 2}px`
				};
				// Object.assign(style, this.barStyle);
				return style;
			},
		},

		async mounted() {
			// 获取tabs组件的尺寸信息
			let tabRect = await this.$uGetRect('#' + this.id);
			// tabs组件距离屏幕左边的宽度
			this.parentLeft = tabRect.left;
			this.getTabRect()
		},

		onLoad(e) {
			this.loginStatus = e.status
		},

		onShow() {
			this.getCodeImg()
		},

		methods: {

			// 查询tab的布局信息
			getTabRect() {
				// 创建节点查询
				let query = uni.createSelectorQuery().in(this);
				// 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
				for (let i = 0; i < this.tabsList.length; i++) {
					// 只要size和rect两个参数
					query.select(`#tab-item-${i}`).fields({
						size: true,
						rect: true
					});
				}
				// 执行查询，一次性获取多个结果
				query.exec(
					function(res) {
						this.tabQueryInfo = res;
						// 初始化滚动条和移动bar的位置
						this.scrollByIndex();
					}.bind(this)
				);
			},

			// 滚动scroll-view，让活动的tab处于屏幕的中间位置
			scrollByIndex() {
				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
				let tabInfo = this.tabQueryInfo[this.currentIndex];
				if (!tabInfo) return;
				// 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
				let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
				// 计算当前活跃item到组件左边的距离
				this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
				// 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
				// 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
				if (this.barFirstTimeMove == true) {
					setTimeout(() => {
						this.barFirstTimeMove = false;
					}, 100)
				}
			},

			change(index) {
				this.currentIndex = index;
			},

			// 获取图形验证码
			getCodeImg() {
				LoginApi.getCodeImg().then(res => {
					this.captchaOnOff =
						res.data.captchaOnOff === undefined ? true : res.data.captchaOnOff;
					if (this.captchaOnOff) {
						this.codeUrl = "data:image/gif;base64," + res.data.img;
						this.form1.uuid = res.data.uuid;
					}
				});
			},

			// 账号密码登录表单验证
			formValidationPwd() {
				const app = this
				if (!app.validteIdentity(app.form1.enterpriseName) || !app.validteAccount(app.form1.userName) ||
					!app
					.validtePwd(app
						.form1.password) || !app.validteCode(app.form1.code)) {
					return false
				}
				return true
			},

			// 手机短信登录表单验证
			formValidationNote() {
				const app = this
				if (!app.validtePhone(app.form2.phone) || !app.validteNoteCode(app.form2.code)) {
					return false
				}
				return true
			},

			validteIdentity(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入企业账号')
					return false
				}
				return true
			},

			validteCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入验证码')
					return false
				}
				return true
			},

			validteAccount(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入账号')
					return false
				}
				return true
			},

			validtePwd(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入密码')
					return false
				}
				return true
			},

			// 短信验证码非空验证
			validteNoteCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入短信验证码')
					return false
				}
				return true
			},

			// 验证手机号
			validtePhone(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请输入手机号')
					return false
				}

				if (!Verify.isPhone(str)) {
					this.$toast('请输入正确的手机号')
					return false
				}
				return true
			},

			// 短信验证码获取
			handleCaptcha(formName) {
				const app = this
				if (app.validtePhone(app.form2.phone)) {
					app.sendCaptcha(app.form2.phone);
				}
			},

			// 表单校验
			async handleLogin() {
				const app = this
				// isLoading 防止重复点击 currentIndex 判断是那种登录
				if (!app.isLoading && (app.currentIndex === 0 ? app.formValidationPwd() : app.formValidationNote())) {
					// 让登录用户选择是否开发服务推送功能
					uni.requestSubscribeMessage({
						tmplIds: ['DOPrHvNAaCkqpCI482U8EKA2SP6-Na9vC5HsMS814l8',
							'Mjms74QPNq03MasyDpZ2HHE069Md-SK_pL5Ndc1ch_Q'
						],
						success(res) {
							// 获得微信codeid
							uni.login({
								success: res => {
									//code值(5分钟失效)
									app.codeId = res.code;
									// 登录方法
									app.submitLogin()
								}
							});
						}
					})
				}
			},

			// 确认登录
			async submitLogin() {
				const app = this
				app.isLoading = true

				try {
					let result;
					if (app.currentIndex === 0) {
						result = await store.dispatch('LoginPassword', {
							...app.form1,
							codeId: app.codeId
						})
					} else {
						result = await store.dispatch('loginByCode', {
							...app.form2,
							codeId: app.codeId
						})
					}

					// 显示登录成功
					app.$toast(result.msg)

					// 跳转回原页面
					setTimeout(() => {
						// 相应全局事件订阅: 刷新上级页面数据
						uni.$emit('syncRefresh', true)
						this.onNavigateBack(app.deltas)
					}, 500)

				} catch (error) {
					console.log(error);
					app.$toast(error.result.msg)
				} finally {
					app.isLoading = false
				}
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({ // 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
						delta: Number(delta || 1),
						success() {
							uni.$emit('update', {
								msg: '页面更新'
							})
						},
					})
				} else {
					uni.switchTab({ // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
						url: '/pages/tabBar/overview/index'
					})
					// this.$navTo('pages/tabBar/home/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 100rpx 60rpx;
		min-height: 100vh;
		background-color: #fff;
	}

	.tabs {
		margin-bottom: 60rpx;

		.title {
			color: #191919;
			font-size: 40rpx;
		}

		.tab-bar {
			margin-top: 20rpx;
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		padding: 18rpx;
		border-bottom: 1rpx solid #f3f1f2;
		margin-bottom: 30rpx;
		height: 96rpx;

		&--input {
			font-size: 28rpx;
			letter-spacing: 1rpx;
			flex: 1;
			height: 100%;
		}

		&--parts {
			min-width: 100rpx;
			height: 100%;
		}

		// 短信验证码
		.captcha-sms {
			font-size: 28rpx;
			line-height: 50rpx;
			padding-right: 20rpx;

			.activate {
				color: #42B3BC;
			}

			.un-activate {
				color: #9e9e9e;
			}
		}

		.code {
			.code-img {
				width: 200rpx;
				height: 100%;
			}
		}
	}

	// 其他登录方式
	.other-logins {
		display: flex;
		color: #42B3BC;
		justify-content: space-between;
	}

	// 登录按钮
	.login-button {
		width: 100%;
		height: 86rpx;
		margin-top: 80rpx;
		// background: linear-gradient(to right, #ecb53c, #ff9211);
		background-color: #42B3BC;
		color: #fff;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>